<script setup lang="ts" name="CarDevice">
import { useMessage } from '/@/hooks/message';
import { watch, ref } from 'vue';

const props = defineProps<{
	show: boolean;
	carInfo: {
		vehicleId: string;
		hphm: string;
		driverName: string;
		driverPhone: string;
		companyName: string;
		xzqh: string;
		vehicleLicense: string;
		driverLicense: string;
		emissionType: string;
		whitelist: string;
		whitelistAdmissionDate: string;
		transportDuration: string;
		transportDistance: string;
		stopCount: string;
		bayonetCount: string;
		workSiteCount: string;
		transportCount: string;
		overSpeedWarnCount: string;
		overloadWarnCount: string;
		onlineRate: string | number;
	};
	deviceList: {
		camera: ResponseNameSpace.VehicleTrajectory.VehicleDeviceItem[];
	};
}>();

// const emits = defineEmits<{
// 	onDeviceClick: [device: ResponseNameSpace.VehicleTrajectory.VehicleDeviceItem];
// }>();

// 本地存储在线率，用于监听变化
const localOnlineRate = ref(props.carInfo?.onlineRate || 0);

// 监听在线率变化
watch(
	() => props.carInfo?.onlineRate,
	(newValue) => {
		console.log('CarDevice 组件中在线率变化:', newValue);
		localOnlineRate.value = newValue || 0;
	},
	{ immediate: true },
);

// 预览证件
function previewLicense(url, type) {
	if (!url) {
		useMessage().warning(`暂无${type}信息`);
		return;
	}

	// 判断文件类型
	const fileExt = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
	const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];

	if (imageTypes.includes(fileExt)) {
		// 图片类型，使用图片预览
		window.open(url);
	} else if (fileExt === 'pdf') {
		// PDF类型，在新窗口打开
		window.open(url);
	} else {
		// 其他类型，提供下载
		const link = document.createElement('a');
		link.href = url;
		link.download = `${type}.${fileExt}`;
		link.click();
	}
}
</script>

<template>
	<div
		class="car-info absolute right-8 top-3 rounded px-4 py-6 box-border"
		:class="{ 'show-car-info': show }"
	>
		<div class="pb-3">
			<div class="flex items-center">
				<span class="text-2xl SHS-B">{{ carInfo.hphm || '' }}</span>
				<div
					class="energy-type ml-3 w-[52px] h-5 rounded border border-[#266EFF] flex items-center justify-center text-[#266EFF] text-sm leading-none"
				>
					{{ carInfo.energyType || '' }}
				</div>
				<img
					class="w-5 h-5 ml-2"
					src="/@/assets/iconImg/icon_004.png"
					alt=""
					srcset=""
				/>
			</div>
			<!-- <span class="text-base text-[#828282]">{{ carInfo.transportCompanyName || '' }}</span> -->
			<div class="flex items-center mt-1">
				<span>{{ carInfo.driverName || '某某某' }}</span>
				<span class="ml-3 text-[#1890FF]">{{
					carInfo.driverTel || '**********'
				}}</span>
				<img
					class="w-4 h-4 ml-2"
					src="/@/assets/iconImg/icon_001.png"
					alt=""
					srcset=""
				/>
			</div>
		</div>
		<!-- 证件 -->
		<div
			class="leftBf absolute right-0 top-7 flex items-center justify-center text-[#FFFFFF] text-xl"
		>
			{{ localOnlineRate }}%
		</div>
		<div class="cardObj flex items-center">
			<div
				class="card flex items-center justify-center cursor-pointer"
				:class="{ disabled: !carInfo.vehicleLicense }"
				@click="previewLicense(carInfo.vehicleLicense, '行驶证')"
			>
				<img
					class="w-5 h-5 ml-2"
					src="/@/assets/iconImg/icon_005.png"
					alt=""
					srcset=""
				/>
				<span
					class="ml-1"
					:class="carInfo.vehicleLicense ? 'text-[#1890FF]' : 'text-[#999999]'"
					>行驶证</span
				>
			</div>
			<div
				class="card flex items-center justify-center ml-2 cursor-pointer"
				:class="{ disabled: !carInfo.driverLicense }"
				@click="previewLicense(carInfo.driverLicense, '驾驶证')"
			>
				<img
					class="w-5 h-5 ml-2"
					src="/@/assets/iconImg/icon_006.png"
					alt=""
					srcset=""
				/>
				<span
					class="ml-1"
					:class="carInfo.driverLicense ? 'text-[#1890FF]' : 'text-[#999999]'"
					>驾驶证</span
				>
			</div>
		</div>
		<!-- 参数 -->
		<div class="argument mt-3 p-2 grid grid-cols-3 gap-3">
			<div class="argument_list flex items-center flex-col w-30">
				<span class="text-[#1890FF]"
					>{{ carInfo.transportDuration || '0' }} h</span
				>
				<span class="text-[#999999]">运输时长</span>
			</div>
			<div class="argument_list flex items-center flex-col w-30 ml">
				<span class="text-[#1890FF]"
					>{{ carInfo.transportDistance || '0' }} km</span
				>
				<span class="text-[#999999]">运输距离</span>
			</div>
			<div class="argument_list flex items-center flex-col w-30">
				<span class="text-[#1890FF]"
					>{{ carInfo.stayPointCount || '0' }} 次</span
				>
				<span class="text-[#999999]">停靠</span>
			</div>
			<div class="argument_list flex items-center flex-col w-30">
				<span class="text-[#1890FF]">{{ carInfo.bayonetCount || '0' }} 个</span>
				<span class="text-[#999999]">途径卡口</span>
			</div>
			<div class="argument_list flex items-center flex-col w-30">
				<span class="text-[#1890FF]"
					>{{ carInfo.inOutProjectCount || '0' }} 个</span
				>
				<span class="text-[#999999]">进出工地</span>
			</div>
			<div class="argument_list flex items-center flex-col w-30">
				<span class="text-[#1890FF]"
					>{{ carInfo.transportCount || '0' }} 趟</span
				>
				<span class="text-[#999999]">参与拉运</span>
			</div>
		</div>
		<!-- 预警 -->
		<!-- <div class="forewarning grid grid-cols-2 gap-2 mt-3">
			<div class="forewarning-obj flex flex-col justify-center pl-7">
				<span class="text-[#1890FF]"
					>{{ carInfo.overSpeedWarnCount || '0' }} 次</span
				>
				<span class="text-[#999999]">超速预警</span>
			</div>
			<div class="forewarning-obj flex pl-7 flex-col justify-center">
				<span class="text-[#1890FF]"
					>{{ carInfo.overloadWarnCount || '0' }}次</span
				>
				<span class="text-[#999999]">超载预警</span>
			</div>
		</div> -->
		<!-- 准运名单 -->
		<div class="track flex items-center">
			<div class="track_q"></div>
			<span class="ml-3 text-[#4AA8FF]">{{
				carInfo.whiteListFlag ? '准运车辆' : '非准运车辆'
			}}</span>
			<span v-if="carInfo.whiteListFlag" class="ml-3 text-[#4AA8FF] ml-11"
				>准入时间：{{ carInfo.joinWhiteListTime || '' }}</span
			>
		</div>
		<!-- 地址 -->
		<div class="address flex items-center justify-between mt-3">
			<div class="flex items-center">
				<img
					class="w-5 h-5 ml-2"
					src="/@/assets/iconImg/icon_002.png"
					alt=""
					srcset=""
				/>
				<span class="ml-1 text-[#999999]">{{ carInfo.xzqh || '' }}</span>
			</div>
			<div class="flex items-center">
				<img
					class="w-5 h-5 ml-2"
					src="/@/assets/iconImg/icon_003.png"
					alt=""
					srcset=""
				/>
				<span class="ml-1 text-[#999999]">{{ carInfo.companyName || '' }}</span>
			</div>
		</div>
		<!-- <div class="flex flex-col pt-4">
			<div
				v-for="(device, index) in deviceList.camera"
				:key="device.channelNo"
				class="flex items-center cursor-pointer"
				:class="{ 'mb-3': index !== deviceList.camera.length - 1 }"
				@click="emits('onDeviceClick', device)"
			>
				<div class="w-3 h-3 rounded-full mr-4" :class="device.isOnline === '0' ? 'bg-[#ddd]' : 'bg-[#35CA82]'"></div>
				<span>{{ device.name }}-{{ device.channelName }}</span>
			</div>
		</div> -->
	</div>
</template>

<style lang="scss" scoped>
.car-info {
	width: 340px;
	background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
	border: 1px solid #eaeaea;
	transition: all 0.3s;
	transform: translateX(calc(100% + 32px));
}

.show-car-info {
	transform: translateX(0);
}
.leftBf {
	width: 90px;
	height: 44px;
	background: linear-gradient(268deg, #1890ff 0%, #53acff 100%);
	border-radius: 22px 0px 0px 22px;
}
.card {
	width: 104px;
	height: 32px;
	background: #eaf3fc;
	border-radius: 16px;
	transition: all 0.3s;

	&.disabled {
		cursor: not-allowed;
		opacity: 0.7;
		background: #f5f5f5;
	}

	&:not(.disabled):hover {
		background: #d9ecff;
	}
}
.argument {
	background: #eff6fd;
}
.forewarning-obj {
	width: 148px;
	height: 65px;
	background: #f2f7fb;
}
.track {
	background: #f2f7fb;
	margin-top: 11px;
	padding: 15px 12px;
}
.track_q {
	width: 11px;
	height: 11px;
	background: #2596ff;
	border-radius: 50%;
}
</style>
